<template>
	<view>
		<u-navbar :title="$t('reserve.navText')" placeholder :autoBack="true" />
		<view class="content">
			<u--text
				:text="$t('reserve.people1')"
				color="#141414"
				size="16"
				bold
				margin="0px 0px 15px 0px"
			/>
			<scroll-view scroll-x>
				<!-- 				<view class="numBox">
					<view
						v-for="(item, index) in numList"
						class="num_item"
						@click="setNum(item)"
						:class="[form.people == item ? 'num_active' : '']"
					>
						{{ item }}
					</view>
				</view> -->
				<!-- <view @click="showNum=true">
					请选择用餐人数
				</view> -->
				<view>
					<u--input
						placeholder="请选择用餐人数"
						v-model="form.people"
						disabled
						@click.native="showNum = true"
					></u--input>
				</view>
			</scroll-view>
			<u-calendar
				:show="timeShow"
				color="#FFC100"
				showLunar
				closeOnClickOverlay
				@close="timeShow = false"
				@confirm="timeConfirm"
			></u-calendar>
			<u--text
				:text="$t('reserve.date')"
				color="#141414"
				size="16"
				bold
				margin="15px 0px"
			></u--text>
			<scroll-view scroll-x>
				<view class="dateBox">
					<view class="num_item" @click="timeShow = true">
						{{ form.date ? form.date : '选择用餐时间' }}
					</view>
					<!-- <view v-for="(item,index) in dayList" class="num_item" @click="setDay(item)"
						:class="[form.date == item.year+'-'+item.month+'-'+item.day ? 'num_active' : '']">
						{{item.isToday ? '今日' : item.month+'.'+item.day}}
					</view> -->
				</view>
			</scroll-view>
			<u--text
				:text="$t('reserve.is_box')"
				color="#141414"
				size="16"
				bold
				margin="15px 0px"
			></u--text>
			<scroll-view scroll-x>
				<view class="dateBox">
					<view
						v-for="(item, index) in shop.lanmu.type"
						class="num_item"
						@click="confirmPlace(item)"
						:class="[form.is_box == item ? 'num_active' : '']"
					>
						{{ item }}
					</view>
				</view>
			</scroll-view>
			<u--text :text="$t('reserve.time')" color="#141414" size="16" bold margin="15px 0px" />
			<scroll-view scroll-x>
				<view class="grid_3">
					<view
						class="grid3_item"
						@click="setName(item)"
						:class="[timeName == item.name ? 'grid_active' : '']"
						v-for="(item, index) in quantumList"
						:key="index"
					>
						<view class="grid_name">{{ item.name }}</view>

						<!-- <view class="grid_label">{{ item.label }}</view> -->
						<view class="grid_label">{{ item.dinnertime }}</view>
					</view>
				</view>
			</scroll-view>
			<scroll-view scroll-x v-if="timeName" class="m-top-20">
				<view class="dateBox">
					<view
						v-for="(item, index) in timeList"
						class="num_item"
						@click="setTime(item)"
						:class="[item.disabled ? 'disabled' : '', form.time == item.label ? 'num_active' : '']"
					>
						{{ item.label }}
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="content m-top-10" style="padding: 30rpx 30rpx 70rpx 30rpx;">
			<view class="title">
				<u--text :text="$t('reserve.location')" color="#141414" size="16" bold></u--text>
				<view class="status">
					<view class="status-box">
						<view class="box-left-forbidden"></view>
						<view class="box-right">{{ $t('reserve.forbidden') }}</view>
					</view>
					<view class="status-box">
						<view class="box-left-choosable"></view>
						<view class="box-right">{{ $t('reserve.choosable') }}</view>
					</view>
				</view>
			</view>
			<view v-if="form.is_box == '大厅'">
				<view class="place_list" v-if="shop.yes_table_num.length > 0">
					<view
						class="place_item"
						@click="goItem(item)"
						:class="[
							Number(item.state) == 1 ? 'forbidden' : '',
							form.num == item.table_num ? 'active' : ''
						]"
						v-for="(item, index) in shop.yes_table_num"
						:key="index"
					>
						{{ item.table_num }}
					</view>
				</view>
				<view class="m-top-20" v-else>
					<u-empty mode="data" text="大厅为空" iconSize="60"></u-empty>
				</view>
			</view>
			<view v-if="form.is_box == '包厢'">
				<view class="box_list" v-if="shop.yes_table_num.length > 0">
					<view v-for="(item, index) in shop.yes_table_num" :key="index" @click="goItem(item)">
						<view class="bos_item" v-if="item.state == 1" style="border: 2rpx solid #EEEEEE;">
							<view class="item_top" style="background: #EEEEEE;">
								<u--text
									align="center"
									color="#979393"
									lines="1"
									size="15px"
									text="已预定"
								></u--text>
							</view>
							<image src="/static/image/merchant_8.png" class="box_image"></image>
							<u--text
								size="14px"
								color="#979393"
								align="center"
								margin="0px 0px 10rpx 0px"
								:text="item.box_num + '人桌'"
							></u--text>
							<u--text
								size="14px"
								color="#979393"
								align="center"
								margin="0px 0px 25rpx 0px"
								:text="'最多容纳' + item.box_max + '人'"
							></u--text>
							<view class="item_top" style="background: #EEEEEE;">
								<u--text
									color="#979393"
									lines="1"
									size="15px"
									align="center"
									:text="
										language == 'zh'
											? item.box_name
											: item.box_name_copy
											? item.box_name_copy
											: item.box_name
									"
								></u--text>
							</view>
						</view>
						<view class="bos_item" v-else>
							<view class="item_top" :class="[boxName == item.box_name ? 'box_active' : '']">
								<u--text
									align="center"
									color="#231916"
									lines="1"
									size="15px"
									:text="boxName == item.box_name ? '已选中' : '可预订'"
								></u--text>
							</view>
							<image
								src="/static/image/merchant_8.png"
								class="box_image"
								@click.native.stop="goBox(item)"
							/>
							<u--text
								size="14px"
								color="#FFC100"
								align="center"
								margin="0px 0px 10rpx 0px"
								:text="item.box_num + '人桌'"
							></u--text>
							<u--text
								size="14px"
								color="#FFC100"
								align="center"
								margin="0px 0px 25rpx 0px"
								:text="'最多容纳' + item.box_max + '人'"
							></u--text>
							<view class="item_top" :class="[boxName == item.box_name ? 'box_active' : '']">
								<u--text
									color="#231916"
									lines="1"
									size="15px"
									align="center"
									:text="
										language == 'zh'
											? item.box_name
											: item.box_name_copy
											? item.box_name_copy
											: item.box_name
									"
								></u--text>
							</view>
						</view>
					</view>
				</view>
				<view class="m-top-20" v-else>
					<u-empty mode="data" text="包厢为空" iconSize="60"></u-empty>
				</view>
			</view>
			<view class="label" v-if="boxName">
				您目前选择的位置为:
				<text class="label_text">{{ boxName }}</text>
			</view>
		</view>
		<view class="info">
			<u--text
				:text="$t('reserve.reserve')"
				bold
				size="16"
				align="center"
				margin="0 0 15px 0"
			></u--text>
			<view class="box">
				<view class="input_item">
					<text>{{ $t('reserve.people') }}</text>
					<u--input
						:placeholder="$t('reserve.peopleSearch')"
						border="none"
						v-model="form.reserve_people"
					/>
				</view>
				<view class="input_item">
					<text>{{ $t('reserve.mobile') }}</text>
					<u--input
						:placeholder="$t('reserve.mobileSearch')"
						border="none"
						type="number"
						v-model="form.reserve_mobile"
					></u--input>
				</view>
			</view>
		</view>
		<view class="btn">
			<u-button
				:text="$t('reserve.reserveBtn')"
				shape="circle"
				:customStyle="btnStyle"
				@click="submit"
			/>
			<view class="safe_height_bottom"></view>
		</view>
		<popup v-model="popupShow" :title="$t('reserve.affirm')">
			<view slot="center">
				<view class="box_item">
					<text class="item_left">{{ $t('subscribe.bookPerson') }}</text>
					<text class="item_right">{{ form.reserve_people }}</text>
				</view>
				<view class="box_item">
					<text class="item_left">{{ $t('subscribe.contactWay') }}</text>
					<text class="item_right">{{ form.reserve_mobile }}</text>
				</view>
				<view class="box_item">
					<text class="item_left">{{ $t('subscribe.reserveTime') }}</text>
					<text class="item_right">{{ form.date + ' ' + form.time }}</text>
				</view>
				<view class="box_item">
					<text class="item_left">
						{{ form.is_box == '大厅' ? $t('subscribe.deskNum') : $t('subscribe.boxName') }}
					</text>
					<text class="item_right">{{ boxName }}</text>
				</view>
				<view class="box_item">
					<text class="item_left">{{ $t('subscribe.reserve') }}</text>
					<text class="price">
						{{ userInfo.vip == '0' ? '￥' + shop.reserve_price : '会员免费' }}
					</text>
				</view>
				<u-button
					:text="$t('reserve.confirm')"
					:customStyle="btn1Style"
					shape="circle"
					@click="goMenulist"
				/>
				<u--text
					:text="$t('subscribe.popupBtn1')"
					color="#FF9F04"
					size="16"
					align="center"
					margin="0 0 20px 0"
					@click="popupShow = false"
				/>
			</view>
		</popup>

		<u-modal
			:show="show"
			showCancelButton
			@confirm="onConfirm"
			@cancel="onCancel"
			width="300"
			confirmColor="#FF9F04"
			:title="$t('reserve.hint')"
			content="是否提前点餐?"
		></u-modal>
		<!-- 选择人数的弹窗 -->
		<u-picker
			:show="showNum"
			:columns="columns"
			@confirm="confirms"
			@cancel="showNum = false"
		></u-picker>
	</view>
</template>

<script>
import graceChecker from '@/mixins/formVerify.js';
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			showNum: false,
			columns: [['1-4人', '5-8人', '9-12人', '13-16人', '17-20人', '20人以上']],
			shop: {
				yes_table_num: []
			}, //店铺座位
			popupShow: false, //确定弹窗
			timeShow: false,
			popupWidth: 0,
			quantumList: [],

			form: {
				shop_id: 0, //商铺id
				people: '', //用餐人数
				date: '', //日期
				time: '', //时间
				num: '', //座位号
				is_box: '大厅', //用餐位置
				reserve_people: '', //预定人
				reserve_mobile: '' //预定人手机号
			},
			rule: {
				people: {
					type: String,
					required: true,
					message: '请选择用餐人数'
				},
				date: {
					type: String,
					required: true,
					message: '请选择用餐日期'
				},
				is_box: {
					type: String,
					required: true,
					message: '请选择用餐地方'
				},
				time: {
					type: String,
					required: true,
					message: '请选择用餐时间'
				},
				num: {
					type: String,
					required: true,
					message: '请选择座位号'
				},
				reserve_people: {
					type: String,
					required: true,
					message: '请输入预订人姓名'
				},
				reserve_mobile: {
					type: String,
					required: true,
					message: '请输入预订人联系方式'
				}
			},
			btnStyle: {
				background: '#FFC100',
				color: '#000',
				border: 'none',
				height: '90rpx'
			},
			btn1Style: {
				background: '#FFC100',
				border: 'none',
				color: '#000',
				height: '80rpx',
				width: '350rpx',
				margin: '20px auto'
			},
			show: false,
			order_id: 0,
			token: '',
			boxName: '',
			dayList: [],
			timeList: [],
			startHour: 0, //开始时间
			endHour: 0, //结束时间
			step: 30, //间隔时间(分钟)
			result: '',
			timeName: '',
			boxId: 0
		};
	},
	onLoad(e) {
		this.form.shop_id = e.id;
		this.initPicker();
		this.form.reserve_people = this.userInfo.nickname;
		this.form.reserve_mobile = this.userInfo.mobile;
	},
	onReady() {
		this.popupWidth = uni.$u.sys().windowWidth * 0.8;
	},
	computed: {
		...mapGetters(['userInfo']),
		language() {
			return this._i18n.locale;
		}
	},
	methods: {
		// 确认选择的人数
		confirms(e) {
			console.log(e.value[0]);
			this.form.people = e.value[0];
			this.init();
			this.showNum = false;
		},
		setName(item) {
			this.timeName = item.name;
			this.startHour = item.start;
			this.endHour = item.end;
			this.getHours();
		},
		timeConfirm(event) {
			console.log(event);
			this.form.date = event[0];
			this.timeShow = false;
		},
		goBox(item) {
			uni.navigateTo({
				url:
					'/pagesA/home/boxDetail?id=' +
					item.id +
					'&shop_id=' +
					this.shop.shop.id +
					'&num=' +
					(item.box_num + '-' + item.box_max + '人')
			});
		},
		forMatNumber(n) {
			return n < 10 ? '0' + n : n;
		},
		initPicker() {
			let _this = this;
			let aDate = new Date();
			let weekList = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
			_this.dayList.push({
				year: aDate.getFullYear(),
				month: _this.forMatNumber(aDate.getMonth() + 1),
				day: _this.forMatNumber(aDate.getDate()),
				week: weekList[aDate.getDay()],
				isToday: true
			});
			for (let i = 1; i <= 6; i++) {
				aDate.setDate(aDate.getDate() + 1);
				_this.dayList.push({
					year: aDate.getFullYear(),
					month: _this.forMatNumber(aDate.getMonth() + 1),
					day: _this.forMatNumber(aDate.getDate()),
					week: weekList[aDate.getDay()],
					isToday: false
				});
			}
			this.form.date =
				_this.dayList[0].year + '-' + _this.dayList[0].month + '-' + _this.dayList[0].day;
			this.init();
		},
		getHours() {
			let _this = this;
			let aDate = new Date();
			let curHour = aDate.getHours();
			_this.timeDate = [];
			for (let j = _this.startHour * 1; j < _this.endHour * 1; j++) {
				for (let k = 0; k < 60; k += _this.step) {
					_this.timeDate.push(_this.forMatNumber(j) + ':' + _this.forMatNumber(k));
				}
			}
			_this.timeDate.splice(_this.timeDate.length - 1, 1);
			let flag =
				this.form.date ==
				this.dayList[0].year + '-' + this.dayList[0].month + '-' + this.dayList[0].day;
			this.initHours(!flag);
		},
		initHours(flag) {
			let _this = this;
			let aDate = new Date();
			let curHour = aDate.getHours();
			_this.timeList = [];
			let dateTime = this.getPresent();
			dateTime = new Date(dateTime.replace(/-/g, '/'));
			var presenTime = dateTime.getTime();
			if (flag) {
				for (var i = 0; i < _this.timeDate.length; i++) {
					var timeVal = {};
					timeVal.label = _this.timeDate[i];
					timeVal.disabled = false;
					timeVal.show = false;
					_this.timeList.push(timeVal);
				}
			} else {
				_this.result =
					_this.dayList[0].year + '-' + _this.dayList[0].month + '-' + _this.dayList[0].day;
				for (var i = 0; i < _this.timeDate.length; i++) {
					var timeVal = {};
					var timestamp = new Date(
						(_this.result + ' ' + _this.timeDate[i]).replace(/-/g, '/')
					).getTime();
					timeVal.label = _this.timeDate[i];
					timeVal.disabled = timestamp < presenTime ? true : false;
					timeVal.show = false;
					_this.timeList.push(timeVal);
				}
			}
		},
		getPresent() {
			var date = new Date();
			var y = date.getFullYear();
			var m = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
			var d = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
			var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
			var f = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
			var formatdate = y + '-' + m + '-' + d + ' ' + h + ':' + f;
			return formatdate;
		},
		init() {
			this.boxName = '';
			this.form.num = '';
			this.shop.yes_table_num = [];
			this.$http
				.post('wanlshop/reserve/reserveUserList', {
					shop_id: this.form.shop_id,
					type: this.form.is_box == '大厅' ? 1 : 0,
					date: this.form.date,
					time: this.form.time,
					num: this.form.people
				})
				.then(res => {
					if (res.code == 1) {
						this.shop = res.data;
						this.quantumList = this.shop.binner.filter(el => {
							return el.pid === 0;
						});
						this.quantumList.forEach(el => {
							let arr = el.dinnertime_text.split('-');
							let start = arr[0].split(':')[0];
							let end = arr[1].split(':')[0];
							el.start = start;
							el.end = end;
						});
						// this.numList = [...new Set(this.shop.lanmu.num)];
						// console.log(this.numList);
					}
				});
		},
		//用餐人数
		// setNum(item) {
		// 	this.form.people = item;
		// 	this.init();
		// },
		// 用餐时间
		setTime(item) {
			item.disabled ? uni.$u.toast('该时间无法预定') : (this.form.time = item.label);

			this.init();
		},
		//用餐日期
		setDay(item) {
			// this.form.date = item.year + '-' + item.month + '-' + item.day
			// this.result = item.year + "-" + item.month + "-" + item.day
			// this.initHours(!item.isToday)
			// let flag = this.form.date ==  this.dayList[0].year + '-' + this.dayList[0].month + '-' + this.dayList[0].day
			// console.log(flag,'--flag--')
			// this.initHours(!flag)
			this.init();
		},
		//用餐地方
		confirmPlace(event) {
			this.form.is_box = event;
			console.log(this.form.is_box);
			this.shop.yes_table_num = [];
			this.init();
		},
		// 提交预定
		submit() {
			let transit = graceChecker.RuleValidation(this.form, this.rule);
			if (transit) {
				if (!this.checkMobile(this.form.reserve_mobile)) return uni.$u.toast('手机号格式不正确');
				this.popupShow = true;
			}
		},
		//确认预定
		goMenulist() {
			let timestamp = new Date(this.form.date + ' ' + this.form.time).getTime() / 1000;
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			this.$http
				.post('wanlshop/reserve/reserveUser', {
					shop_id: this.form.shop_id,
					people: this.form.people,
					num: this.form.num,
					is_box: this.form.is_box == '大厅' ? 1 : 0,
					mealsTime: timestamp,
					reserve_mobile: this.form.reserve_mobile,
					reserve_people: this.form.reserve_people
				})
				.then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						uni.$emit('upList');
						this.order_id = res.data.reserveOrder.id;
						this.token = res.data.token;
						this.boxId = res.data.reserveOrder.num;
						let vip = parseInt(this.userInfo.vip);
						if (vip == 0) {
							this.getPay();
						} else {
							this.popupShow = false;
							this.show = true;
						}
					}
				});
		},
		//支付预定费用
		getPay() {
			uni.showLoading({
				title: '支付中...',
				mask: true
			});
			this.$http
				.post('wanlshop/pay/payment', {
					order_id: this.order_id,
					order_type: 'reserve',
					type: 'wechat',
					access_token: this.token,
					method: 'miniapp',
					code: uni.getStorageSync('code')
				})
				.then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						uni.requestPayment({
							provider: 'wxpay',
							appId: res.data.appId,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							paySign: res.data.paySign,
							timeStamp: res.data.timeStamp,
							signType: res.data.signType,
							success: info => {
								this.popupShow = false;
								this.show = true;
							},
							fail: err => {}
						});
					}
				});
		},
		// 点菜确定
		onConfirm() {
			this.show = false;
			uni.$u.route({
				url: '/pagesA/home/menuList',
				type: 'redirectTo',
				params: {
					shop_id: this.form.shop_id,
					reserve_id: this.order_id,
					table_num: this.boxId
				}
			});
		},
		// 点菜取消
		onCancel() {
			this.show = false;
			uni.$u.route({
				url: '/pagesA/subscribe/detail',
				type: 'redirectTo',
				params: {
					id: this.order_id
				}
			});
		},
		// 选择包厢 大厅
		goItem(item) {
			if (item.state == 1) return uni.$u.toast('此位置被预定');
			this.form.num = item.table_num;
			this.form.is_box == '大厅' ? (this.boxName = item.table_num) : (this.boxName = item.box_name);
		}
	}
};
</script>
<style>
page {
	background: #f5f7f9;
}
</style>
<style lang="scss" scoped>
.grid_3 {
	display: flex;
	align-items: center;
	.grid3_item {
		background: #f8f8f8;
		border-radius: 100rpx;
		color: #656565;
		font-size: 30rpx;
		padding: 10rpx 40rpx;
		flex-shrink: 0;
		margin-right: 20rpx;
	}

	.grid_name,
	.grid_label {
		text-align: center;
		line-height: 42rpx;
	}
	.grid_active {
		background: #fff8e2 !important;
		color: #ff9f04 !important;
	}
}

/deep/.u-modal__content {
	text-align: center;
}

.box_list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 20rpx;
	grid-row-gap: 20rpx;

	.bos_item {
		border-radius: 4rpx;
		border: 2rpx solid #ffe594;

		.item_top {
			background: #ffe594;
			padding: 15rpx;
		}

		.box_image {
			width: 238rpx;
			height: 137rpx;
			display: block;
			margin: 40rpx auto 35rpx;
		}
	}

	.box_active {
		background: #ffc100 !important;
	}
}

.dateBox,
.numBox {
	display: flex;
	align-items: center;

	.num_item {
		background: #f8f8f8;
		border-radius: 39rpx;
		color: #656565;
		font-size: 30rpx;
		padding: 20rpx 40rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.num_active {
		background: #fff8e2 !important;
		color: #ff9f04 !important;
	}

	.disabled {
		background: #eeeeee !important;
		color: #979393 !important;
	}
}

.box_item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 2rpx solid #eeeeee;
	padding: 40rpx 0;
	margin: 0 50rpx;

	.item_left {
		color: #818181;
		font-size: 30rpx;
		text-align: left;
	}

	.item_right {
		color: #231916;
		font-size: 30rpx;
		text-align: right;
	}

	.price {
		color: #ff583e;
		font-size: 30rpx;
		text-align: right;
	}
}

.box_item:last-child {
	border-bottom: none;
}

.content {
	padding: 30rpx;
	background-color: #fff;
	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.status {
			display: flex;
			align-items: center;

			.status-box {
				display: flex;
				align-items: center;
				margin-left: 20rpx;

				.box-left-choosable,
				.box-left-forbidden {
					width: 30rpx;
					height: 30rpx;
					background-color: #eeeeee;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.box-right {
					color: #989898;
					font-size: 26rpx;
					font-weight: 400;
				}

				.box-left-choosable {
					background-color: #ffc100;
				}
			}
		}
	}
}

.btn {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	border-top-left-radius: 35rpx;
	border-top-right-radius: 35rpx;
	background-color: #fff;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	z-index: 10000;
}

.place_list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-column-gap: 20rpx;
	grid-row-gap: 40rpx;
	// display: flex;
	// align-items: center;
	// flex-wrap: wrap;
	// box-sizing: border-box;

	.place_item {
		// margin: 0 10px 10px 0;
		box-sizing: border-box;
		border-radius: 5px;
		border: 1px solid #ffc100;
		color: #231916;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
	}

	.forbidden {
		background-color: #eeeeee !important;
		border: 2rpx solid #eeeeee !important;
		color: #979393 !important;
	}

	.active {
		background-color: #ffc100 !important;
		border: 2rpx solid #ffc100 !important;
		color: #fff !important;
	}
}

.label {
	color: #4e4e4e;
	font-size: 28rpx;
	text-align: center;
	margin-top: 60rpx;

	.label_text {
		color: #ffc100;
		margin: 0 6rpx;
	}
}

.info {
	border-top-left-radius: 40rpx;
	border-top-right-radius: 40rpx;
	padding: 50rpx 30rpx 240rpx 30rpx;
	margin-top: -10px;
	background-color: #f5f7f9;

	.box {
		border-radius: 35rpx;
		background-color: #fff;
		padding: 0 40rpx;

		.input_item {
			border-bottom: 2rpx solid #eeeeee;
			padding: 40rpx 0;
			display: grid;
			grid-template-columns: 140rpx auto;
			color: #231916;
			font-size: 30rpx;
			align-items: center;
		}

		.input_item:last-child {
			border-bottom: none;
		}
	}
}
</style>
